<template>
  <div class="designer">
    <LeftPanel/>
    <MiddleDesignArea @select-component="selectComponent" :selectedComponent="selectedComponent" />
    <RightPanel :component="selectedComponent" @update-component="updateComponent" />
  </div>
</template>

<script>
import LeftPanel from './LeftPanel.vue';
import MiddleDesignArea from './MiddleDesignArea.vue';
import RightPanel from './RightPanel.vue';

export default {
  data() {
    return {
      selectedComponent: null,  // 当前选中的组件
      components: []  // 所有添加的组件
    };
  },
  methods: {
    selectComponent(comp) {
      // 设置选中组件为当前点击的组件
      this.selectedComponent = comp;
    },
    updateComponent(updatedComp) {
      // 在components数组中找到对应的组件，更新其属性
      const index = this.components.findIndex(c => c.id === updatedComp.id);
      if (index !== -1) {
        this.$set(this.components, index, { ...updatedComp });
      }
    }
  },
  components: {
    LeftPanel,
    MiddleDesignArea,
    RightPanel
  }
};
</script>

<style scoped>
.designer {
  display: flex;
  height: 95%;
}

.left-panel {
  width: 200px;
  border-right: 1px solid #ddd;
}

.middle-design-area {
  flex-grow: 1;
  padding: 10px;
}

.right-panel {
  width: 200px;
  border-left: 1px solid #ddd;
}
</style>
